<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D 旋转 | CSS Only</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="box">
        <span style="--i:1"><img src="img/img-1.png" alt=""></span>
        <span style="--i:2"><img src="img/img-2.png" alt=""></span>
        <span style="--i:3"><img src="img/img-3.png" alt=""></span>
        <span style="--i:4"><img src="img/img-4.png" alt=""></span>
        <span style="--i:5"><img src="img/img-5.png" alt=""></span>
        <span style="--i:6"><img src="img/img-6.png" alt=""></span>
        <span style="--i:7"><img src="img/img-7.png" alt=""></span>
        <span style="--i:8"><img src="img/img-8.png" alt=""></span>
    </div>
</body></html>